{% extends 'myhome/base.html' %}

{% block con %}
    <!-- breadcrumbs-area-start -->
    <div class="breadcrumbs-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumbs-menu">
                        <ul>
                            <li><a href="/">首页</a></li>
                            {% if data.name == data.parent %}
                            <li><a href="#" class="active">{{ data.name }}</a></li>
                            {% else %}
                            <li><a href="#">{{ data.parent }}</a></li>
                            <li><a href="#" class="active">{{ data.name }}</a></li>
                            {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumbs-area-end -->
    <!-- shop-main-area-start -->
    <div class="shop-main-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <div class="shop-left">
                        <div class="section-title-5 mb-30">
                            <h2>图书分类</h2>
                        </div>
                        <div class="left-title mb-20">
                            <h4>{{ data.parent }}</h4>
                        </div>
                        <div class="left-menu mb-30">
                            <ul>
                                {% for i in data.sub %}
                                <li><a href="{% url 'myhome_list' i.id %}"><i {% if i.name == data.name %} style="color: #f07c29" {% endif %}>{{ i.name }}</i><span>({{ i.books_set.count }})</span></a></li>
                                 {% endfor %}
                            </ul>
                        </div>
                        <div class="left-title mb-20">
                            <h4>Random</h4>
                        </div>
                        <div class="random-area mb-30">
                            <div class="product-active-2 owl-carousel">
                                <div class="product-total-2">
                                    <div class="single-most-product bd mb-18">
                                        <div class="most-product-img"><a href="#"><img src="/static/myhome/assats/img/product/20.jpg" alt="book" /></a></div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="#">Endeavor Daytrip</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>$30.00</li>
                                                    <li class="old-price">$33.00</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single-most-product bd mb-18">
                                        <div class="most-product-img"><a href="#"><img src="/static/myhome/assats/img/product/21.jpg" alt="book" /></a></div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="#">Savvy Shoulder Tote</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>$30.00</li>
                                                    <li class="old-price">$35.00</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single-most-product">
                                        <div class="most-product-img"><a href="#"><img src="/static/myhome/assats/img/product/22.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/22.jpg" alt="book" /></a></div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="#">Compete Track Tote</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>$35.00</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-total-2">
                                    <div class="single-most-product bd mb-18">
                                        <div class="most-product-img"><a href="#"><img src="/static/myhome/assats/img/product/23.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/23.jpg" alt="book" /></a></div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="#">Voyage Yoga Bag</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>$30.00</li>
                                                    <li class="old-price">$33.00</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single-most-product bd mb-18">
                                        <div class="most-product-img"><a href="#"><img src="/static/myhome/assats/img/product/24.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/24.jpg" alt="book" /></a></div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="#">Impulse Duffle</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>$70.00</li>
                                                    <li class="old-price">$74.00</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single-most-product">
                                        <div class="most-product-img"><a href="#"><img src="/static/myhome/assats/img/product/22.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/22.jpg" alt="book" /></a></div>
                                        <div class="most-product-content">
                                            <div class="product-rating">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                </ul>
                                            </div>
                                            <h4><a href="#">Fusion Backpack</a></h4>
                                            <div class="product-price">
                                                <ul>
                                                    <li>$59.00</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="banner-area mb-30">
                            <div class="banner-img-2"><a href="#"><img src="/static/myhome/assats/img/banner/31.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/banner/31.jpg" alt="banner" /></a></div>
                        </div>
                        <div class="left-title-2 mb-30">
                            <h2>Compare Products</h2>
                            <p>You have no items to compare.</p>
                        </div>
                        <div class="left-title-2">
                            <h2>My Wish List</h2>
                            <p>You have no items in your wish list.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                    <div class="section-title-5 mb-30">
                        <h2>书</h2>
                    </div>
                    <div class="toolbar mb-30">
                        <div class="shop-tab">
                            <div class="tab-3">
                                <ul>
                                    <li class="active"><a href="#th" data-toggle="tab"><i class="fa fa-th-large"></i>Grid</a></li>
                                    <li><a href="#list" data-toggle="tab"><i class="fa fa-bars"></i>List</a></li>
                                </ul>
                            </div>
                            <div class="list-page">
                                <p>Items 1-9 of 11</p>
                            </div>
                        </div>
                        <div class="field-limiter">
                            <div class="control"><span>Show</span><!-- chosen-start --><select data-placeholder="Default Sorting" style="width:50px;" class="chosen-select" tabindex="1">
                                    <option value="Sorting">1</option>
                                    <option value="popularity">2</option>
                                    <option value="rating">3</option>
                                    <option value="date">4</option>
                                </select><!-- chosen-end -->
                            </div>
                        </div>
                        <div class="toolbar-sorter"><span>Sort By</span><select id="sorter" class="sorter-options" data-role="sorter">
                                <option selected="selected" value="position">Position</option>
                                <option value="name">Product Name</option>
                                <option value="price">Price</option>
                            </select><a href="#"><i class="fa fa-arrow-up"></i></a></div>
                    </div><!-- tab-area-start -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="th">
                            <div class="row">
                                {% if data.parent == data.name %}
                                    {% for v in data.sub %}
                                        {% for vv in v.books_set.all %}
                                            <div class="col-lg-3 col-md-4 col-sm-6">
                                                <!-- single-product-start -->
                                                <div class="product-wrapper mb-40">
                                                    <div class="product-img"><a href="#">
                                                        <img src="/{{ vv.bookimgs_set.first.img_url }}" alt="book" class="primary" /></a>
                                                        <div class="product-flag">
                                                            <ul>
                                                                <li><span class="sale">new</span></li>
                                                                <li><span class="discount-percentage">-5%</span></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="product-details text-center">
                                                        <div class="product-rating">
                                                            <ul>
                                                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                                <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                            </ul>
                                                        </div>
                                                        <h4><a href="{% url 'myhome_detail' vv.id %}">{{ vv.title }}</a></h4>
                                                        <div class="product-price">
                                                            <ul>
                                                                <li>￥{{ vv.price }}</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="product-link">
                                                        <div class="product-button"><a href="#" title="Add to cart"><i class="fa fa-shopping-cart"></i>加入购物车</a></div>
                                                        <div class="add-to-link">
                                                            <ul>
                                                                <li><a href="{% url 'myhome_detail' vv.id %}" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div><!-- single-product-end -->
                                            </div>
                                        {% endfor %}
                                    {% endfor %}
                                {% else %}
                                    {% for vv in data.books_set.all %}
                                        <div class="col-lg-3 col-md-4 col-sm-6">
                                            <!-- single-product-start -->
                                            <div class="product-wrapper mb-40">
                                                <div class="product-img"><a href="#">
                                                    <img src="/{{ vv.bookimgs_set.first.img_url }}" alt="book" class="primary" /></a>
                                                    <div class="product-flag">
                                                        <ul>
                                                            <li><span class="sale">new</span></li>
                                                            <li><span class="discount-percentage">-5%</span></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="product-details text-center">
                                                    <div class="product-rating">
                                                        <ul>
                                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                            <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        </ul>
                                                    </div>
                                                    <h4><a href="{% url 'myhome_detail' vv.id %}">{{ vv.title }}</a></h4>
                                                    <div class="product-price">
                                                        <ul>
                                                            <li>￥{{ vv.price }}</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="product-link">
                                                    <div class="product-button"><a id="addcart" href="javascript:void(0)" title="Add to cart"><i class="fa fa-shopping-cart"></i>加入购物车</a></div>
                                                    <div class="add-to-link">
                                                        <ul>
                                                            <li><a href="{% url 'myhome_detail' vv.id %}" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div><!-- single-product-end -->
                                        </div>
                                    {% endfor %}
                                {% endif %}
                            </div>
                        </div>
                        <div class="tab-pane fade" id="list">
                            <!-- single-shop-start -->
                            <div class="single-shop mb-30">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="product-wrapper-2">
                                            <div class="product-img"><a href="#"><img src="/static/myhome/assats/img/product/3.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/3.jpg" alt="book" class="primary" /></a></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                                        <div class="product-wrapper-content">
                                            <div class="product-details">
                                                <div class="product-rating">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4><a href="#">Crown Summit</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>$36.00</li>
                                                        <li class="old-price">$38.00</li>
                                                    </ul>
                                                </div>
                                                <p>The sporty Joust Duffle Bag can't be beat - not in the gym, not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare,...</p>
                                            </div>
                                            <div class="product-link">
                                                <div class="product-button"><a href="#" title="Add to cart"><i class="fa fa-shopping-cart"></i>Add to cart</a></div>
                                                <div class="add-to-link">
                                                    <ul>
                                                        <li><a href="product-details.html" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/product-details.html" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- single-shop-end -->
                            <!-- single-shop-start -->
                            <div class="single-shop mb-30">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="product-wrapper-2">
                                            <div class="product-img"><a href="#"><img src="/static/myhome/assats/img/product/18.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/18.jpg" alt="book" class="primary" /></a></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                                        <div class="product-wrapper-content">
                                            <div class="product-details">
                                                <div class="product-rating">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4><a href="#">Driven Backpack</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>$34.00</li>
                                                        <li class="old-price">$36.00</li>
                                                    </ul>
                                                </div>
                                                <p>The sporty Joust Duffle Bag can't be beat - not in the gym, not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare,...</p>
                                            </div>
                                            <div class="product-link">
                                                <div class="product-button"><a href="#" title="Add to cart"><i class="fa fa-shopping-cart"></i>Add to cart</a></div>
                                                <div class="add-to-link">
                                                    <ul>
                                                        <li><a href="product-details.html" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/product-details.html" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- single-shop-end -->
                            <!-- single-shop-start -->
                            <div class="single-shop mb-30">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="product-wrapper-2">
                                            <div class="product-img"><a href="#"><img src="/static/myhome/assats/img/product/10.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/10.jpg" alt="book" class="primary" /></a></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                                        <div class="product-wrapper-content">
                                            <div class="product-details">
                                                <div class="product-rating">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4><a href="#">Fusion Backpack</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>$59.00</li>
                                                    </ul>
                                                </div>
                                                <p>The sporty Joust Duffle Bag can't be beat - not in the gym, not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare,...</p>
                                            </div>
                                            <div class="product-link">
                                                <div class="product-button"><a href="#" title="Add to cart"><i class="fa fa-shopping-cart"></i>Add to cart</a></div>
                                                <div class="add-to-link">
                                                    <ul>
                                                        <li><a href="product-details.html" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/product-details.html" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- single-shop-end -->
                            <!-- single-shop-start -->
                            <div class="single-shop mb-30">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="product-wrapper-2">
                                            <div class="product-img"><a href="#"><img src="/static/myhome/assats/img/product/5.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/5.jpg" alt="book" class="primary" /></a></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                                        <div class="product-wrapper-content">
                                            <div class="product-details">
                                                <div class="product-rating">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4><a href="#">Set of Sprite Yoga Straps</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li><span>Starting at</span>$34.00</li>
                                                    </ul>
                                                </div>
                                                <p>The sporty Joust Duffle Bag can't be beat - not in the gym, not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare,...</p>
                                            </div>
                                            <div class="product-link">
                                                <div class="product-button"><a href="#" title="Add to cart"><i class="fa fa-shopping-cart"></i>Add to cart</a></div>
                                                <div class="add-to-link">
                                                    <ul>
                                                        <li><a href="product-details.html" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/product-details.html" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- single-shop-end -->
                            <!-- single-shop-start -->
                            <div class="single-shop">
                                <div class="row">
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                        <div class="product-wrapper-2">
                                            <div class="product-img"><a href="#"><img src="/static/myhome/assats/img/product/19.jpg" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/img/product/19.jpg" alt="book" class="primary" /></a></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                                        <div class="product-wrapper-content">
                                            <div class="product-details">
                                                <div class="product-rating">
                                                    <ul>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                        <li><a href="#"><i class="fa fa-star"></i></a></li>
                                                    </ul>
                                                </div>
                                                <h4><a href="#">Compete Track Tote</a></h4>
                                                <div class="product-price">
                                                    <ul>
                                                        <li>$32.00</li>
                                                    </ul>
                                                </div>
                                                <p>The sporty Joust Duffle Bag can't be beat - not in the gym, not on the luggage carousel, not anywhere. Big enough to haul a basketball or soccer ball and some sneakers with plenty of room to spare,...</p>
                                            </div>
                                            <div class="product-link">
                                                <div class="product-button"><a href="#" title="Add to cart"><i class="fa fa-shopping-cart"></i>Add to cart</a></div>
                                                <div class="add-to-link">
                                                    <ul>
                                                        <li><a href="product-details.html" tppabs="http://v.bootstrapmb.com/2018/7/rlrum1631/product-details.html" title="Details"><i class="fa fa-external-link"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- single-shop-end -->
                        </div>
                    </div><!-- tab-area-end -->
                    <!-- pagination-area-start -->
                    <div class="pagination-area mt-50">
                        <div class="list-page-2">
                            <p>Items 1-9 of 11</p>
                        </div>
                        <div class="page-number">
                            <ul>
                                <li><a href="#" class="active">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#" class="angle"><i class="fa fa-angle-right"></i></a></li>
                            </ul>
                        </div>
                    </div><!-- pagination-area-end -->
                </div>
            </div>
        </div>
    </div>
    <!-- shop-main-area-end -->
{% endblock %}
